import React,{Component} from "react"
import "antd/dist/antd.css"
import { Input,Button,List } from "antd"
import store from "./store/main"
// 运用常量大写引用的方式使得编写错误就是现实出来，避免开发的时候错误,增加复用性
// import { CHANGE_INPUT,ADD_ITEM,DELETE_ITEM } from "./store/actionTypes"
import { changeInputAction,addItemAction,deleteItemAction } from "./store/actionCreators"
class ToDoList extends Component{
    constructor(props){
        super(props)
        this.state=store.getState()
        // 订阅模式。让数据进行更新,实时监听
        this.storeChange=this.storeChange.bind(this)
        store.subscribe(this.storeChange)
    }
    render(){
        return <div style={{margin:'10px'}}>
            <div>
            <Input onKeyPress={this.keyPress} onChange={this.changeInputValue} value={this.state.inputValue} placeholder={this.state.inputValue} style={{width:'350px',marginRight:'5px'}}></Input>
            <Button onClick={this.clickButton} type="primary">增加</Button>
            </div>
            <div style={{margin:'5px',width:'400px'}}>
                <List bordered dataSource={this.state.list} renderItem={(item,index)=>(<List.Item >{item}<Button onClick={this.deleteItem.bind(this,index)} style={{float:'right'}} type="danger">删除</Button></List.Item>)}>

                </List>
            </div>
        </div>
    }
    changeInputValue=(e)=>{
        const action=changeInputAction(e.target.value)
        store.dispatch(action)
    }
    storeChange=()=>{
        this.setState(store.getState())
    }
    clickButton=()=>{
        const action=addItemAction()
        store.dispatch(action)
    }
    keyPress=(e)=>{
        if(e.which==13){
            this.clickButton();
        }
    }
    deleteItem=(i)=>{
        const action=deleteItemAction(i)
        store.dispatch(action)
    }
}
export default ToDoList;




// import React from "react"
// export default class ToDoList extends React.Component{
//     constructor(props){
//         super(props)
//         this.state={

//         }
//     }
//     render(){
//         return <div>
//             <h1>你好</h1>
//         </div>
//     }
// }